<template>
  <div v-if="userlist">
    <!-- 导航栏 -->
    <van-nav-bar title="用户" fixed />
    <!-- 用户头像 -->
    <div class="user_photo" style="margin-top: 56px">
      <div>
        <div>
          <van-image
            @click="show = true"
            round
            width="30vw"
            height="30vw"
            :src="`http://39.108.211.154${userlist.uimg}`"/>
          <div class="user_name">{{ userlist.uname }}</div>
          <div>
            <router-link to="">{{ userlist.uemail }}</router-link>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改用户头像 -->
    <van-action-sheet v-model="show" title="头像预览">
      <div class="content">
        <img v-if="userhead" :src="`http://39.108.211.154${userhead}`" />
        <img v-else :src="`http://39.108.211.154${userlist.uimg}`" />
        <el-upload
          action="http://39.108.211.154:8080/upload_user"
          name="uploadFile"
          :limit="1"
          :show-file-list="false"
          :on-success="onSuccess">
          <el-button plain style="margin: 30px 20px 30px 0" size="small" type="primary">上传头像</el-button>
          <el-button
            size="small"
            type="primary"
            @click.stop=""
            @click="UndateHead()">
            修改头像
          </el-button>
        </el-upload>
      </div>
    </van-action-sheet>

    <!-- 功能模块 -->
    <div class="user_function">
      <div class="function_list">
        <div class="list" @click="$router.push('/production')">
          <span>
            <van-icon size="9vw" :name="require('../assets/cs-img/zp.png')" />
            <span>我的作品</span>
          </span>
          <span>
            <van-icon name="arrow" />
          </span>
        </div>

        <div class="list" @click="Routerwork()">
          <span>
            <van-icon size="9vw" :name="require('../assets/cs-img/paise.png')" />
            <span>发布摄影</span>
          </span>
          <span>
            <van-icon name="arrow" />
          </span>
        </div>

        <div class="list" @click="$router.push('/userlike')">
          <span>
            <van-icon size="9vw" :name="require('../assets/cs-img/collect.svg')" />
            <span>喜欢</span>
          </span>
          <span>
            <van-icon name="arrow" />
          </span>
        </div>

        <div
          class="list"
          @click="$router.push('/usercollect')"
          style="border-bottom: 1px solid rgb(230, 230, 230)">
          <span>
            <van-icon size="9vw" :name="require('../assets/cs-img/sc.svg')" />
            <span>收藏</span>
          </span>
          <span>
            <van-icon name="arrow" />
          </span>
        </div>

        <div
          @click="$router.push('/aboutwe')"
          class="list"
          style="margin-top: 40px">
          <span>
            <van-icon size="9vw" :name="require('../assets/cs-img/help.svg')" />
            <span>关于我们</span>
          </span>
          <span>
            <van-icon name="arrow" />
          </span>
        </div>

        <div
          class="list"
          @click="showtrue"
          style="border-bottom: 1px solid rgb(230, 230, 230)">
          <span>
            <van-icon size="9vw" :name="require('../assets/cs-img/relation.png')" />
            <span>联系我们</span>
          </span>
          <span>
            <van-icon name="arrow" />
          </span>
        </div>
      </div>
    </div>

    <van-popup
      v-model="ewmshow"
      closeable
      position="bottom"
      lock-scroll
      :style="{ height: '30%' }">
      <img :src="require('../assets/cs-img/ewm.png')" />
      <div>Gitee地址</div>
    </van-popup>

    <!-- 退出登录按钮 -->
    <div class="btn_user">
      <button @click="userBack()">退出登录</button>
    </div>
  </div>
</template>

<script>

import { Toast } from "vant";
import { Dialog } from 'vant';

export default {
  data() {
    return {
      userlist: null,
      ewmshow: false,
      show: false,
      // 用户预览头像
      userhead: "",
    };
  },
  watch: {
    show() {
      if (this.show == false) {
        this.userhead = "";
      }
    },
    userhead() {
      console.log("用户头像路径:", this.userhead);
    },
  },
  mounted() {
    // 根据vuex的user查询到的用户资料
    this.axios.get(`http://39.108.211.154:8080/user_username?username=${this.$store.state.user}`)
      .then((res) => {
        this.userlist = res.data[0];
      });
  },
  methods: {
    Routerwork(){
      this.axios.get(`http://39.108.211.154:8080/surplus_photo?username=${this.$store.state.user}`).then(res => {
        console.log('用户剩余的作品数', res.data[0].photo_num);
         if(res.data[0].photo_num == 0){
          Dialog.alert({
            message: "这个月您已经发布过作品了哦! 下个月再来!",
            confirmButtonColor:'rgb(255, 153, 0)',
            confirmButtonText: '确定',
            width: '75vw'
          })
        }else{
          this.$router.push('/photoworks')
        }
      })
    },
    showtrue() {
      this.ewmshow = true;
    },
    userBack() {
      this.$store.commit("logout");
      this.$router.push("/login");
    },
    onSuccess(resp) {
      console.log(resp);
      this.userhead = resp.urls[0];
    },
    UndateHead() {
      if (this.userhead) {
        this.axios.get(`http://39.108.211.154:8080/update_unuco?uimg=${this.userhead}&uname=${this.userlist.uname}`).then((res) => {
          console.log(res);
          this.$router.go(0);
          Toast.success('修改完成');
        });
        }else {
          Dialog.alert({
            message: "上传头像后, 才可进行修改头像哦!",
            width: '70vw',
            confirmButtonColor: 'rgb(255, 153, 0)',
          }).then(() => {
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep.van-action-sheet img{
  width: 1000px;
  display: block;
}
.van-popup {
  img {
    display: block;
    width: 180px;
    height: 180px;
    position: relative;
    left: 50%;
    transform: translate(-50%);
    margin-top: 4vw;
    text-align: center;
  }
  div {
    margin-top: 5px;
    text-align: center;
    color: black;
    font-size: 4vw;
    font-weight: bold;
  }
}
::v-deep.van-nav-bar__text {
  color: #fdc03a;
}
.user_photo {
  width: 100%;
  height: 56vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  div {
    text-align: center;
    font-weight: 600;
    color: black;
    font-size: 5vw;
    margin: 1.5vw 0;
  }
  a {
    text-align: center;
    font-size: 3.5vw;
    color: #fdc03a;
  }
}
.user_function {
  width: 100%;
  .function_list {
    width: 100%;
    .list {
      padding: 0 20px;
      height: 14vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid rgb(230, 230, 230);
      font-size: 3.5vw;
      &:hover {
        background-color: rgb(240, 240, 240);
      }
      span:nth-child(1) {
        display: flex;
        align-items: center;
        .van-icon__image {
          display: block;
          margin-right: 4vw;
        }
      }
    }
  }
}
.btn_user {
  width: 100%;
  margin-top: 13vw;
  button {
    display: block;
    margin: 0 auto;
    width: 80%;
    height: 13vw;
    border-radius: 7vw;
    background-color: #fdc03a;
    border: 0;
    color: black;
    font-size: 4vw;
  }
}
::v-deep.van-hairline--bottom::after {
  border-color: #aaa;
}
</style>